<template>
  <div class="product-list">
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardHeader> </CardHeader>
      </div>
      <cardinput-vue :text="'请输入搜索信息'"></cardinput-vue>
    </el-card>
    <!-- 数据 -->
    <el-card class="box-card product-list-card" shadow="never">
      <div slot="header" class="clearfix">
        <CardDate @add="add()"></CardDate>
      </div>
      <el-table :data="tableData" height="500px" border stripe highlight-current-row style="width: 100%">
        <el-table-column type="selection" align="center" width="50"></el-table-column>
        <el-table-column type="index" label="编号" align="center" width="50"></el-table-column>
        <el-table-column label="商品图片" align="center" width="150">
          <template slot-scope="scope">
            <el-image v-if="tableData[scope.$index]" style="width: 100px; height: 100px"
              :src="tableData[scope.$index].product_url1" fit="fit" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="center" width="300">
          <template slot-scope="scope">
            <p>货号：{{ tableData[scope.$index].product_no }}</p>
            <p v-text="tableData[scope.$index].product_name"></p>
          </template>
        </el-table-column>
        <el-table-column label="分类/品牌" align="center" width="140">
          <template slot-scope="scope">
            <p>分类：{{ tableData[scope.$index].type_id }}</p>
            <p>品牌：{{ tableData[scope.$index].brand_id }}</p>
          </template>
        </el-table-column>
        <el-table-column label="价格" align="center" width="140">
          <template slot-scope="scope">
            <p>进价：￥{{ tableData[scope.$index].in_price }}</p>
            <p>售价：￥{{ tableData[scope.$index].out_price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="标签" align="center" width="140">
          <template slot-scope="scope">
            <p>上架：<el-switch @change="isSaleState(scope.$index)" v-model="tableData[scope.$index].is_sale" /></p>
            <p>新品：<el-switch @change="isNewState(scope.$index)" v-model="tableData[scope.$index].is_new" /></p>
          </template>
        </el-table-column>
        <el-table-column label="库存" width="90" align="center">
          <template slot-scope="scope">
            <p>库存：{{ tableData[scope.$index].product_stock }}</p>
          </template>
        </el-table-column>

        <el-table-column label="开售时间" align="center" width="100" prop="sale_time">
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="150">
          <template slot-scope="scope">
            <div>
              <el-button size="mini" @click="add(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" slot="reference"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </el-card>
  </div>
</template>

<script>
import { getproduct, deletsProduct,showPageProduct } from '@/api';
import CardinputVue from '@/components/commodity/Cardinput.vue';
import CardHeader from '@/components/commodity/CardHeader.vue';
import CardDate from '@/components/commodity/CardDate.vue'
export default {
  name: 'KodaiProductList',

  data () {
    return {
      //搜索表单
      ruleForm: {
        name: '',
        goodsNo: '',
        sort: '',
        brand: '',     /*商品品牌*/
        put_status: '',    /*上架状态*/
        new_status: '',  /*新品状态*/
        stockout_status: '',/*缺货状态*/
      },
      tableData: [],
      total: 20,
      queryParams: {
        pageNum: 1,
        pageSize: 5
      },
    };
  },

  mounted () {
    getproduct().then(res => {
      this.total = res.data.data.length
      this.getList();
    })
  },

  methods: {
    // 分页组件函数
    async getList () { 
      // 显示加载动画
      let loading = this.$loading({ lock: true, text: "加载中", background: "rgba(0, 0, 0, 0.7)" });
      try {
        var res = await showPageProduct(this.queryParams)
        if (res.data.code == 200) {
          this.tableData = res.data.data
          this.tableData.map(item => {
            item.is_new = item.is_new == '1' ? true : false
            item.is_sale = item.is_sale == '1' ? true : false
          })
        }
      }
      catch (err) {
        // 显示注册失败的消息，并提示错误原因
        this.showMessage.call(this, 'error', '查询失败');
      }finally {
        // 关闭加载动画
        loading.close();
      }
     
    },

    add (data) {
      this.$router.push({
        path: '/ProductAdd',
        //hash地址转向，用query对象传递参数
        query: {
          data: JSON.stringify(data)
        }
      })
    },
    // 删除
    handleDelete (index, row) {
      this.$confirm('此操作将永久删除该商品信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let loading = this.$loading({ lock: true, text: "数据提交中", background: "rgba(255,255,255,0.1)" });
        deletsProduct(row).then(res => {
          loading.close();
          if (res.data.code === 200) {
            // rows.splice(index, 1);//删掉该行
            this.$router.go(0)
            this.$notify({ title: '成功', message: '商品(' + row.product_name + ')\t移除成功', type: 'success' });
          } else {
            this.$notify({ title: '错误', message: res.data.msg, type: 'error' });
          }
        }).catch((err) => {
          loading.close();
          this.$message.error(err);
        })
      }).catch((err) => {
        
        })
    }
  },
  components: {
    CardHeader,
    CardDate,
    CardinputVue
  }
};
</script>

<style lang="scss" scoped>
.product-list {
  margin: 10px auto;
  padding: 0;
  min-height: 100%;
  border: 1px solid #FFF;
}

.product-list .el-card__header {
  padding: 10px 13px !important;
}

.product-list .box-card {
  margin: 10px 30px 10px;
}


.product-list .el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.el-card ::v-deep .el-card__header {
  padding: 2px 10px;
}
</style>